import React, { useState, useEffect } from 'react';
import Breadcrumb from 'components/common/Breadcrumb';
import './index.less';
import Area from 'components/Area';
import { useRequest } from 'ahooks';
import {
    getAllLiftingControl,
    getLiftingControlByArea,
    ILiftControl,
    LiftingControlVoltageStatus,
} from 'api/LiftControl';
import { Card, Progress } from 'antd';
import { WarningOutlined } from '@ant-design/icons';
import EmptyTip from 'components/EmptyTip';
const OperationCheck = () => {
    const [selectedArea, setSelectedArea] = useState(-1);
    const { data: allLiftingControls, run: getAllLiftingControlRun } = useRequest(getAllLiftingControl, {
        manual: true,
    });
    const { data: areaLiftingControls, run: getAreaLiftingControlsRun } = useRequest(
        () => getLiftingControlByArea({ areaId: selectedArea }),
        {
            manual: true,
        },
    );
    useEffect(() => {
        selectedArea === -1 ? getAllLiftingControlRun() : getAreaLiftingControlsRun();
    }, [selectedArea]);
    const renderStatus = (status: number) => {
        return (
            <span>
                {[-1, 1].indexOf(status) > -1 && <WarningOutlined className="mr5" style={{ color: 'red' }} />}
                {LiftingControlVoltageStatus[status]}
            </span>
        );
    };
    const showEmpty = () => {
        if (selectedArea === -1 && allLiftingControls?.control.length === 0) {
            return <EmptyTip />
        } else if (areaLiftingControls?.list.length === 0) {
            return <EmptyTip />
        }
    }
    return (
        <div className="operation-check">
            <Breadcrumb crumbs={['智能管控', '运维自检']}></Breadcrumb>
            <div className="flex">
                <Area selectedArea={selectedArea} setSelectedArea={setSelectedArea}></Area>
                <div className="right-liftings">
                    {(selectedArea === -1 ? allLiftingControls?.control || [] : areaLiftingControls?.list || []).map(
                        (liftingControl: ILiftControl) => (
                            <Card key={liftingControl.id} className="lifting-card" hoverable>
                                <div>
                                    <span className="mr40 bold">控制箱IP: </span>
                                    <span>{liftingControl.ipAddress}</span>
                                </div>
                                <div>
                                    <span className="mr40 bold">运行电压: </span>
                                    {renderStatus(liftingControl.voltageStatus || 0)}
                                </div>
                                <div>
                                    <span className="mr10 bold">应急电源电量: </span>
                                    <Progress
                                        className="mr10"
                                        percent={liftingControl.emergencyPower ? liftingControl.emergencyPower / 10 : 0}
                                        style={{ width: '60%' }}
                                        showInfo={false}
                                    />{' '}
                                    {liftingControl.emergencyPower}V
                                </div>
                            </Card>
                        ),
                    )}
                    { showEmpty() }
                </div>
            </div>
        </div>
    );
};
export default OperationCheck;
